<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<!--
三：methods, components 和 directives合并

methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取vue组件对象的键值对。

如果 methods 选项中有相同的函数名，则 Vue 实例优先级会较高。如下实例，Vue 实例与混入对象的 methods 选项都包含了相同的函数：
-->
<body>
<div id="databinding"></div>
<script type="text/javascript">
    var mixin = {
        methods: {
            hellworld: function () {
                document.write('HelloWorld 方法' + '<br>');
            },
            samemethod: function () {
                document.write('Mixin：相同方法名' + '<br>');
            }
        }
    };
    var vm = new Vue({
        mixins: [mixin],
        methods: {
            start: function () {
                document.write('start 方法' + '<br>');
            },
            samemethod: function () {
                document.write('Main：相同方法名' + '<br>');
            }
        }
    });
    vm.hellworld();
    vm.start();
    vm.samemethod();
</script>
</body>
</html>